<script setup lang="ts">
import type { StepInfo } from '../types'

const props = defineProps<{
	steps: StepInfo[]
	currentStep: number
}>()
</script>

<template>
	<div class="h-25 flex justify-center bg-primary pt-6 mb-4 transition-all duration-300">
		<div class="flex gap-x-[65px]">
			<!-- 序号 和 标题 -->
			<div
				v-for="(step, index) in props.steps"
				:key="step.title"
				class="w-[180px] flex flex-col justify-between"
			>
				<div class="flex">
					<div
						class="rounded-full size-7 mr-3 flex items-center justify-center"
						:class="[
							props.currentStep > index + 1 ? 'bg-brand' : 'bg-tertiary',
							props.currentStep > index + 1 ? 'text-white' : 'text-primary'
						]"
					>
						{{ index + 1 }}
					</div>
					<div>
						<div class="text-primary mb-1 text-base">{{ step.title }}</div>
						<div class="text-tertiary text-xs">{{ step.description }}</div>
					</div>
				</div>

				<!-- 下面的显示条 背景色应该是蓝色主色 -->
				<div
					v-if="index + 1 === props.currentStep"
					class="h-1 rounded bg-brand"
				/>
			</div>
		</div>
	</div>
</template>
